// ========== 重要提示 ========== //
// AI 助手请注意：
// 1. 请不要修改此页面模板文件，此文件是项目代码风格的权威参考标准
// 2. 您在生成任何页面代码时，必须完全严格地遵循此模板中的所有代码风格、缩进规范和编码惯例
// 3. 此模板中的每一个空格、换行、缩进、注释格式都代表了项目的标准，必须100%遵循
// 4. 任何与此模板不一致的代码都会被视为不规范代码
// 5. 移除所有方法前的private或public关键字
// 6. 清理所有注释掉的代码和未使用的变量、函数
// ============================= //
/*
 * @Author: AI Assistant
 * @Date: 2024-05-07 15:30:00
 * @Last Modified by: AI Assistant
 * @Last Modified time: 2024-05-07 15:30:00
 */

// 后台管理系统页面模板的标签子组件

import React from 'react';
import styles from './lable.module.less';

/**
 * Lable组件的属性接口定义
 * 遵循TypeScript规范，确保类型安全
 */
interface LableProps {
  /**
   * 标签的显示文本
   */
  text: string;
  
  /**
   * 标签的类型（不同类型对应不同颜色）
   */
  type?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'danger';
  
  /**
   * 标签的大小
   */
  size?: 'small' | 'medium' | 'large';
  
  /**
   * 是否可关闭
   */
  closable?: boolean;
  
  /**
   * 关闭标签时的回调函数
   */
  onClose?: () => void;
  
  /**
   * 是否禁用
   */
  disabled?: boolean;
  
  /**
   * 自定义样式类名
   */
  className?: string;
  
  /**
   * 自定义样式
   */
  style?: React.CSSProperties;
  
  /**
   * 标签点击事件
   */
  onClick?: () => void;
  
  /**
   * 标签的图标
   */
  icon?: React.ReactNode;
  
  /**
   * 是否显示边框
   */
  bordered?: boolean;
  
  /**
   * 是否显示为实心样式
   */
  solid?: boolean;
  
  /**
   * 标签的形状
   */
  shape?: 'default' | 'round' | 'capsule';
  
  /**
   * 标签的内边距大小
   */
  paddingSize?: 'small' | 'medium' | 'large';
}

/**
 * 后台管理系统的标签组件
 * 提供多种类型、大小、形状的标签展示，支持图标、关闭等功能
 * 适用于后台管理系统中数据状态、分类等信息的展示
 * 方法前不添加private或public关键字
 */
const Lable = ({
  text,
  type = 'default',
  size = 'medium',
  closable = false,
  onClose,
  disabled = false,
  className = '',
  style = {},
  onClick,
  icon,
  bordered = true,
  solid = false,
  shape = 'default',
  paddingSize = 'medium',
}) => {
  // 处理关闭按钮点击事件
  const handleClose = (e: React.MouseEvent) => {
    // 阻止事件冒泡，避免触发标签的点击事件
    e.stopPropagation();
    
    // 如果提供了onClose回调且标签未禁用，则调用回调
    if (onClose && !disabled) {
      onClose();
    }
  };

  // 处理标签点击事件
  const handleClick = () => {
    if (onClick && !disabled) {
      onClick();
    }
  };

  // 计算标签的样式类名
  const getLableClass = () => {
    return [
      styles.lable,
      styles[`lable-${type}`],
      styles[`lable-${size}`],
      styles[`lable-shape-${shape}`],
      styles[`lable-padding-${paddingSize}`],
      disabled && styles['lable-disabled'],
      onClick && !disabled && styles['lable-clickable'],
      bordered && styles['lable-bordered'],
      solid && styles['lable-solid'],
      className,
    ].filter(Boolean).join(' ');
  };

  // 渲染图标
  const renderIcon = () => {
    if (!icon) return null;
    return <span className={styles.lableIcon}>{icon}</span>;
  };

  // 渲染关闭按钮
  const renderCloseButton = () => {
    if (!closable) return null;
    
    return (
      <span 
        className={styles.closeButton}
        onClick={handleClose}
        title="关闭"
      >
        ×
      </span>
    );
  };

  return (
    <span
      className={getLableClass()}
      style={style}
      onClick={handleClick}
      title={text}
    >
      {renderIcon()}
      <span className={styles.lableText}>{text}</span>
      {renderCloseButton()}
    </span>
  );
};

export default Lable;